<script setup lang="ts">
import { ref, watch } from 'vue'

const emit = defineEmits(['update:open'])

const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    open: {
        type: Boolean,
        default: false
    }
})

const dataOpen = ref(false)

watch(() => props.open, (newVal) => {
    dataOpen.value = newVal
}, { immediate: true })

const close = () => {
    emit('update:open', false)
    dataOpen.value = false
}

const stop = () => { }

</script>
<template>
    <view class="m-props-root" v-show="dataOpen" @click="close">
        <view class="props-content width-600 padding-30" @click.stop="stop">
            <view class="title size-36 padding-bottom-30">{{ title }}</view>
            <view class="close size-60" @click="close">×</view>
            <slot />
        </view>
    </view>
</template>
<style scoped lang="scss">
.m-props-root {
    background-color: rgba($color: #000000, $alpha: .5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .props-content {
        background-color: #fff;
        position: relative;

        .title {
            border-bottom: 1px solid #eee;
            text-align: center;
        }

        .close {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    }
}
</style>